<template>
  
  <!-- HTML结构： 要求 template 里面，有且只有一个根标签 -->
  <div>
    
    <h1>内容渲染指令  个人信息</h1>
    <!-- 插值表达式，  也叫大胡子/小胡子语法 -->
    <!-- 不能当做属性来用，只能放在标签内或标签外 -->
    <p>姓名：{{ uname.toUpperCase() + '  你好呀！' }}</p>
    <p>年龄: {{ age }}</p>
    <p>{{ flag ? '520' : '1314' }}</p>
    
    <!-- 标签的 v-html 属性，相当于 innerHTML 的意思 -->
    <p v-html="info">简介：</p>

    <!-- 标签的 v-text 属性，相当于 innerText 的意思-->
    <p v-text="info">陈述重复</p>

  </div>

</template>


<script>
// JavaScript

export default {
  // 对象里面可以写很多东西，比如 data、 method、 computed、 watch、 componones......
  // data 用于存储数据： 写法上要求data定义函数，函数里面返回一个对象，所有的数据都放到这个返回的对象中
  data() {
    return {
      // 页面中用到的数据，都放到这里
      uname: 'lisiyu',
      age: 23,
      flag: true,
      info: '这是一个<strong>优秀</strong>的Girl'
    }
  }
}

</script>


<style>
/* css样式 */
</style>
